<template>
  <div>
    <van-overlay :show="loading">
      <div class="w-full h-full flex justify-center items-center">
        <van-loading />
      </div>
    </van-overlay>
    <van-empty
      description="暂无记录"
      image="search"
      v-if="tableData.length == 0"
    >
    </van-empty>
    <div v-else>
      <div v-for="item in tableData" :key="item.id" class="order-item">
        <div class="order-item-title">参观时间</div>
        <div class="order-item-row justify-between">
          <div class="order-item-title">
            {{ item.visitDate }}&nbsp;&nbsp;{{ item.visitPeriod }}
          </div>
          <div class="order-item-tips">
            {{ filterOrderStatus(item.orderStatus) }}
          </div>
        </div>
        <div class="order-item-row">
          <label>预约编号</label>
          <label class="ml-4">{{ item.orderSn }}</label>
        </div>
        <div class="order-item-row">
          <label>预约时间</label>
          <label class="ml-4">{{ item.createTime }}</label>
        </div>
        <div class="flex justify-end">
          <RouterLink :to="`/record/${item.id}`" class="order-item-link"
            >查看详情</RouterLink
          >
        </div>
        <van-divider />
      </div>
      <van-divider>无更多内容</van-divider>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";
import { orderList } from "@/request/api/order";
import { RouterLink } from "vue-router";

const loading = ref(false);
const tableData = ref<Array<any>>([]);

const getPage = () => {
  loading.value = true;
  orderList({})
    .then((res: any) => {
      tableData.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
};


const filterOrderStatus = (orderStatus: number) => {
  switch (orderStatus) {
    case 0:
      return "待审核";
    case 1:
      return "审核不通过";
    case 2:
      return "预约成功";
    case 3:
      return "已退订";
  }
};

onBeforeMount(() => {
  getPage();
});
</script>

<style lang="scss" scoped>
.order-item {
  padding: 10px 20px;

  .order-item-title {
    font-size: 18px;
    font-weight: bold;
  }

  .order-item-row {
    display: flex;
    align-items: center;
    padding: 2px 0;
  }

  .order-item-tips {
    font-size: 16px;
    color: var(--base-color);
  }

  .order-item-link {
    font-size: 14px;
    color: var(--base-color);
  }

  label {
    font-size: 14px;
    line-height: 24px;
  }
}
</style>
